import React, { useState } from 'react';
import {Form,Input,Button,notification} from 'antd'
import service from '../../../api'
import { useNavigate } from 'react-router-dom';

interface Props {}

function SwiperAdd(props:Props) {
    
    var navigate = useNavigate()
    const [form] = Form.useForm();

    //表单验证通过执行
    const onFinish = async (values: any) => {
        var res = await service.banner.banner_add( values );
        if( res.data.code == 200 ){
            notification.success({message:'新增图片成功!'});
            navigate('/index/swiper')
        }
    };

    return (
        <div className='swiper-add'>
            <Form
                labelCol={{ span: 4 }}
                wrapperCol={{ span: 20 }}
                style={{ maxWidth: 600 }}
                onFinish={onFinish}
            >
                <Form.Item
                label="轮播图地址"
                name="img"
                rules={[{ required: true, message: '请输入图片地址' }]}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                label="轮播图提示"
                name="alt"
                rules={[{ required: true, message: '请输入轮播图提示' }]}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                label="轮播图链接"
                name="link"
                rules={[{ required: true, message: '请输入轮播图链接' }]}
                >
                    <Input />
                </Form.Item>

                <Form.Item wrapperCol={{ offset: 4, span: 20 }}>
                    <Button type="primary" htmlType="submit">
                        新增图片
                    </Button>
                </Form.Item>
            </Form>
        </div>
    );
}

export default SwiperAdd;